<template>
  <div class="login" >
    <el-form  ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
      <h3 class="title">
        商城管理中心
      </h3>
      <el-tabs type="border-card" v-model="type" stretch>
      <el-tab-pane label="平台登录" name="0"><el-form-item prop="userName">
        <el-input v-model="loginForm.userName" type="text" auto-complete="off" placeholder="账号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="userPassword">
        <el-input v-model="loginForm.userPassword" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
        记住我
      </el-checkbox>


      <el-form-item style="width:100%;">
        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="商家登录"  name="1"><el-form-item prop="userName">
        <el-input v-model="loginForm.userName" type="text" auto-complete="off" placeholder="账号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="userPassword">
        <el-input v-model="loginForm.userPassword" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
        记住我
      </el-checkbox>

      <span style="float:right;color:orange;margin-right: 3px;cursor: pointer;"  v-on:click="toRegist">去注册</span>

      <el-form-item style="width:100%;">
        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item></el-tab-pane>
    </el-tabs>

    </el-form>

    <registerForm ref="form"/>
    <!--  底部  -->
    <div v-if="$store.state.settings.showFooter" id="el-login-footer">
      <span v-html="$store.state.settings.footerTxt" />
      <span> ⋅ </span>
      <a href="http://www.beian.miit.gov.cn" target="_blank">{{ $store.state.settings.caseNumber }}</a>
    </div>
  </div>
</template>

<script>

import { encrypt } from '@/utils/rsaEncrypt'
import Config from '@/settings'
import { login } from '@/api/login'
import registerForm from './registerForm'
import Cookies from 'js-cookie'
import store from '@/store'
export default {
  components: { registerForm },
  name: 'Login',
  data() {
    return {
      codeUrl: '',
      cookiePass: '',
      type:'',
      loginForm: {
        userName: 'root',
        userPassword: 'root',
        type:'',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      loginRules: {
        userName: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
        userPassword: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
       // code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      },
      loading: false,
      redirect: undefined
    }
  },
  // watch: {
  //   $route: {
  //     handler: function(route) {
  //       this.redirect = route.query && route.query.redirect
  //     },
  //     immediate: true
  //   }
  // },
  created() {
    // this.getCode()
    // this.getCookie()
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = res.img
        this.loginForm.uuid = res.uuid
      })
    },
    getCookie() {
      const userName = Cookies.get('userName')
      let userPassword = Cookies.get('userPassword')
      const rememberMe = Cookies.get('rememberMe')
      // 保存cookie里面的加密后的密码
      this.cookiePass = userPassword === undefined ? '' : userPassword
      userPassword = userPassword === undefined ? this.loginForm.userPassword : userPassword
      this.loginForm = {
        userName: userName === undefined ? this.loginForm.userName : userName,
        userPassword: userPassword,
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        code: ''
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        const user = {
          userName: this.loginForm.userName,
          userPassword: this.loginForm.userPassword,
          //类型，0代表运营商，1代表商家
          type:this.type

        }
       login(user).then(res => {
        if (res.status === 200) {
           Cookies.set('Authorization', res.authorization)
           Cookies.set('type', this.type)
           store.dispatch('reloadMenus').then(res => {})
           //store.dispatch('updateShopId').then(res => {})
             this.$router.push({ path: this.redirect || '/' })
        } else {
          alert("登录失败");
        }

      })

          // this.loading = true

          // this.$store.dispatch('Login', user).then(() => {
          //   this.loading = false
          //   this.$router.push({ path: this.redirect || '/' })
          // }).catch(() => {
          //   this.loading = false
          // })

      })
    },
    toRegist(){
      this.$refs.form.dialog = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image:url("../assets/images/bg.jpg");
    background-size: cover;
  }
  .title {
    margin: 0 auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .login-form {
    background-image: url("../assets/images/bg.jpg");
    background-size: 100% 100%;
    border-radius: 6px;
    background: #ffffff;
    width: 385px;
    padding: 25px 25px 5px 25px;
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
    .input-icon{
      height: 39px;width: 14px;margin-left: 2px;
    }
  }
  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .login-code {
    width: 33%;
    display: inline-block;
    height: 38px;
    float: right;
    img{
      cursor: pointer;
      vertical-align:middle
    }
  }
</style>
